<template>
  <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f5f5f5;">
    <div style="font-size: 16px; font-weight: 600; margin-top: 20px;">
      评价订单
    </div>
    <div style="font-size: 14px; margin: 10px 0; color: #999999;">
      <span style="margin-right: 10px;">
        <span style="margin-right: 10px;">订单号:</span>
        <span style="color: #333333">{{ this.$route.query.id }}</span>
      </span>
      <span style="margin-left: 10px;">{{ orderDetail.time }}</span>
    </div>
    <div style="background-color: #fff; width: 1000px; display: flex; flex-direction: row;">
      <div class="info">
        <el-image
          :src="orderDetail.image"
          style="width: 100px; height: 100px; margin-bottom: 10px;"
        ></el-image>
        {{ name }}
      </div>

      <div style="width: 100%; color: #666666; font-size: 14px; --el-text-color-primary: #666666; padding: 20px;">
        <div style="margin-bottom: 20px;"><span style="width: 100px; margin-right: 25px;">商品评价</span> <el-rate
            size="small"
            v-model="rate"
            show-score
            score-template="{value} 分"
          ></el-rate></div>
        <div style="display: flex; flex-direction: row;">
          <span style="width: 100px;">评价晒单</span> <el-input
            v-model="content"
            type="textarea"
          ></el-input>
        </div>
      </div>
    </div>
    <div style="width: 1000px; background-color: #fff; margin: 10px 0; display: flex; justify-content: center; align-items: center;">
      <el-button
        style="margin: 10px;"
        color="#3271ae"
        @click="doCommentAdd"
      >发布评论</el-button>
    </div>
  </div>
</template>

<script>
import { selectOrderDetailById } from "@/api/orderDetail";
import { commentAdd } from "@/api/comment";

export default {
  props: {
    id: Number,
  },
  computed: {
    name() {
      if (this.orderDetail.commodityName !== undefined)
        return this.orderDetail.commodityName.length > 40
          ? this.orderDetail.commodityName.slice(0, 40)
          : this.orderDetail.commodityName;
      return "";
    },
  },
  data() {
    return {
      orderDetail: {},
      rate: 0,
      content: "",
    };
  },
  methods: {
    doSelectOrderDetailById() {
      selectOrderDetailById(this.id).then((res) => {
        this.orderDetail = res;
      });
    },
    doCommentAdd() {
      commentAdd({
        content: this.content,
        commodityId: this.orderDetail.commodityId,
        starLevel: this.rate,
      }).then((res) => {
        this.$emit('release')
      });
    },
  },
  created() {
    this.doSelectOrderDetailById();
  },
};
</script>

<style scoped>
.header {
  background-color: #eae5e3;
}

.main {
  background-color: #f0f3ef;
  overflow: hidden;
  padding: 0;
}

.info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  padding: 20px;
  font-size: 10px;
  border-right: 1px solid #f5f5f5;
  color: #666666;
}

.info:hover {
  color: #3271ae;
  cursor: pointer;
}
</style>